<template>
  <div class="cutOut">
    <div class="title">
      <span class="title-return" onclick="window.history.go(-1)">
        <i class="icon-xiangzuo"></i>
        返回
      </span>
      <span @click="upload($refs.upload)">重新上传</span>
      <span @click="call">确定</span>
    </div>
    <div class="box">
      <div class="icon">
        <span class="icon-left" @click="clickLeft">
          <i class="icon-xuanzhuan"></i>
          <p>左旋</p>
        </span>
        <span class="icon-right" @click="clickRight">
           <i class="icon-xuanzhuan"></i>
           <p>右旋</p>
        </span>
      </div>
      <vueCropper
        ref="cropper"
        :img="example.img"
        :autoCrop="example.autoCrop"
        :autoCropWidth="example.autoCropWidth"
        :autoCropHeight="example.autoCropHeight"
        :fixedBox="example.fixedBox"
        :canMoveBox="example.canMoveBox"
        :full="example.full"
      ></vueCropper>
    </div>
    <input type="file" hidden class="upload-file" id="fileInput" ref="upload"
           @change="imgUpload($refs.upload)"
           accept="image/*">
  </div>
</template>

<script>
  import VueCropper from 'vue-cropper'
  import {mapGetters, mapMutations} from 'vuex'
  import {startUpload} from 'common/js/imgUpload'

  export default {
    data() {
      return {
        example: {
          img: '',
          autoCrop: true,
          fixedBox: true,
          canMoveBox: false,
          autoCropWidth: 0,
          autoCropHeight: 0,
          info: false,
          full:true,
          outputType: 'jpeg',
        },
      }
    },
    computed: {
      ...mapGetters([
        'uploadHeadPic'
      ]),
    },
    mounted() {
      //判断是否在该页面刷新
      if (!this.uploadHeadPic.length) {
        window.history.go(-1);
      }
      this.example.img = this.uploadHeadPic;
      var autoWidth = document.body.offsetWidth / 1.5;
      var autoHeight = document.body.offsetWidth / 1.5;
      this.example.autoCropWidth = autoWidth;
      this.example.autoCropHeight = autoHeight;
    },
    methods: {
      //上传图，本地显示
      imgUpload(item) {
        this.$store.dispatch('showLoading');
        var file = item.files[0]
        var freader = new FileReader();
        freader.readAsDataURL(file);
        freader.onload = (e) => {
          this.$store.dispatch('hideLoading');
          this.example.img = e.target.result
        }
      },
      //唤起照片
      upload(item) {
        //判断是否是苹果，如果是删除capture属性
        var ua = navigator.userAgent.toLowerCase();
        var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
        if (isIos) {
          item.removeAttribute('capture')
        }
        //点击input上传
        item.click();
      },
      //向左旋转90度
      clickLeft() {
        this.$refs.cropper.rotateLeft()
      },
      //向右旋转90度
      clickRight() {
        this.$refs.cropper.rotateRight()
      },
      //确定提交
      call() {
        this.$refs.cropper.getCropData((data) => {
          let param = new FormData()
          param.append('base64Img', data)
          startUpload(param).then(res => {
            if (res.status === 1) {
              this.getPitchHeadPic(res.path);
              this.getPitchHeadPicId(res.img_id);
              window.history.back();
            }
          })
        })
      },
      ...mapMutations({
        getPitchHeadPic: 'PITCH_HEAD_PIC',
        getPitchHeadPicId: 'PITCH_HEAD_PIC_ID',
      })
    },
    components: {
      VueCropper,
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  .title
    position: relative;
    line-height: 1.5rem;
    text-align: right;
    color:$color-title;
    .title-return
      position: absolute;
      top: 0;
      left: .5rem;
      display :block;
      padding-left :.6rem;
      font-size :.41rem;
      i
        position: absolute;
        top: .47rem;
        left:0;
        font-size: .63rem;
        color: $color-note;
    span
      display :inline-block;
      width: 1.5rem;
      text-align:center;

  .box
    position: absolute;
    top: 1.5rem;
    left: 0;
    right: 0;
    bottom: 0;
    .icon
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 9;
      text-align: center;
      color: $color;
      display :flex;
      justify-content :center;
      padding-top:.8rem;
      i
        display :block;
        font-size :.56rem;
        margin-bottom:.15rem;
      .icon-left
        width:2rem;
        i
          transform:rotateY(180deg);
      .icon-right
        width:2rem;




</style>
